﻿/** 
  代码已不加密混淆，方便各位观看，本站秉着开源的精神
  希望你得到了源码可以常来本站看看，如果代码看不懂欢迎在本站搜索框搜索“JSON format”，会有系列文章讲解Lorna的思路
  如果已下代码存在问题，欢迎留言告诉我！
  2017年5月16日
**/
var typeEnum = {
    TYPE_STRING: "string",
    TYPE_INT: "number",
    TYPE_OBJECT: "object",
    TYPE_BOOLEAN: "boolean",
};

function format(name, panel, errorPanel) {
    var json = $(name).val();
    if (json.length < 1) {
        $(errorPanel).show();
        $(errorPanel).text("请输入正确的JSON");

    } else {
        var jsonObj = null;

        try {
            jsonObj = JSON.parse(json);
            var result = formatJson(jsonObj, 1);
            $(panel).html(result);
            $("i").click(folding);
            $(errorPanel).hide();
        } catch (e) {
            $(errorPanel).show();
            $(errorPanel).text("请输入正确的JSON，" + e);
        }
    }
   

}

//// 格式化主方法
//// @jsonObj JSON.parse 元素
//// @tabIndex 缩减单元
function formatJson(jsonObj, tabIndex) {

    var innerhtml = "", idx = 0, isArray = jsonObj instanceof Array, length = 0;
    console.log("1:" + isArray);

    if (jsonObj != null) {
        length = Object.keys(jsonObj).length;
    }
    for (var obj in jsonObj) {

        var isD = idx + 1 != length;

        var preInnerHtml = "";
        //if (typeof jsonObj[obj] == typeEnum.TYPE_OBJECT) {
        //    preInnerHtml = getObjectDiv(obj, formatJson(jsonObj[obj], tabIndex + 1), isD);
        //} else {
        //    console.log("2" + isArray);
        //    if (isArray) {
        //        preInnerHtml = getArrayDiv(jsonObj[obj], isD);
        //    } else {
        //        preInnerHtml = getDiv(obj, jsonObj[obj], isD);
        //    }
        //}
        if (typeof jsonObj[obj] == typeEnum.TYPE_OBJECT) {
            if (isArray) {
                preInnerHtml = getObjectArrayDiv(formatJson(jsonObj[obj], tabIndex + 1), isD);
            } else {
                preInnerHtml = getObjectDiv(obj, formatJson(jsonObj[obj], tabIndex + 1), isD);
            }

        } else {
            console.log("2" + isArray);
            if (isArray) {
                preInnerHtml = getArrayDiv(jsonObj[obj], isD);
            } else {
                preInnerHtml = getDiv(obj, jsonObj[obj], isD);
            }
        }
        innerhtml += preInnerHtml;
        idx++;
    }

    return getPanel(innerhtml, tabIndex, isArray, length);
}
function getDiv(key, value, isD) {
    return "<div>" + getTitleSpan(key) + ":" + getValueSpan(value) + (isD ? "," : "") + "</div>";;
}
function getObjectDiv(key, value, isD) {
    return "<div>" + getTitleSpan(key) + ":" + value + (isD ? "," : "") + "</div>";;
}
function getObjectArrayDiv(value, isD) {
    return "<div>" + value + (isD ? "," : "") + "</div>";;
}
function getArrayDiv(value, isD) {
    return "<div>" + getValueSpan(value) + (isD ? "," : "") + "</div>";;
}
function getTitleSpan(value) {
    return "<span class='key'>\"" + value + "\"</span>";
}
function getValueSpan(value) {
    var type = typeof value;

    switch (type) {
        case typeEnum.TYPE_STRING:
            return "<span class='value_string'>\"" + value + "\"</span>";
        case typeEnum.TYPE_INT:
            return "<span class='value_int'>" + value + "</span>";
        case typeEnum.TYPE_BOOLEAN:
            return "<span class='value_bool'>" + value + "</span>";
    }
    return "error";
}
function getPanel(innerHtml, tabIndex, isArray, index) {
    if (isArray) {
        return "<span class=\"\"><i class='panel-suo'>-</i>[</span><div class=\"tab_" + tabIndex + "\">" + innerHtml + "</div><label class=\"tips\">Array <span class='tips_math'>" + index + "<span></label><span>]</span>";
    } else {
        return "<span class=\"\"><i class='panel-suo'>-</i>{</span><div class=\"tab_" + tabIndex + "\">" + innerHtml + "</div><label class=\"tips\">Object{...}</label><span>}</span>";
    }
}
//// 缩进事件
function folding() {
    var text = $(this).text();
    if (text == "-") {
        $(this).text("+");
        $(this).parent().parent().find("div").hide();
        $(this).parent().parent().find("label").show();
        //$(this).parent().parent().find("label").style("margin:0");
    } else {
        $(this).text("-");
        $(this).parent().parent().find("div").show();
        $(this).parent().parent().find("label").hide();
        //$(this).parent().parent().find("label").style("margin:0");
    }

}